<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础信息</span>
        </div>
      </template>
      <!-- <p class="text item">员工姓名:Allan</p>
      <p class="text item">邮箱:al@al.com</p>
      <p class="text item">所属部门：商用软件事业部</p>
      <p class="text item">职位:高级软件工程师</p>
      <p class="text item">性别:</p>
      <p class="text item">入职日期:</p>
      <p class="text item">生日:</p>
      <p class="text item">婚姻状态:</p>
      <p class="text item">初次参加工作时间:</p> -->
      <div class="first">
        <div class="information">
          <el-form label-width="200px">
            <el-form-item label="部门编号:">{{DeptInfo.deptId}}
            </el-form-item>
            <el-form-item label="部门名称:">{{ DeptInfo.deptName }}</el-form-item>
           
            <el-form-item label="部门负责人:">{{ DeptInfo.deptLeader }}</el-form-item>
            <el-form-item label="员工人数/部门编制:">{{ DeptInfo.allPeople }}</el-form-item>
            <el-form-item label="创建时间:">{{ DeptInfo.createTime }}</el-form-item>
            <el-form-item label="上级部门:">{{ DeptInfo.deptSuper }}</el-form-item>
            <el-form-item label="状态:">{{ DeptInfo.status }}</el-form-item>
          </el-form>
        </div>
        
      </div>




    </el-card>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>部门下属员工信息</span>
        </div>
      </template>
      <el-table :data="DeptEmp" border>
        <el-table-column prop="empId" label="员工编号" />
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="positionName" label="职位/职级" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="birth" label="年龄" />
      </el-table>
    </el-card>
    
  </div>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import type {DeptInfo,DeptEmp} from '@/model'
import {selectDeptInfo} from '@/api/dept'
import { useRoute } from 'vue-router'
import {getDeptEmp} from '@/api/dept'
const route = useRoute()



const DeptInfo=ref<DeptInfo>(
  {
    deptId: 0,
    deptName: '',
    deptLeader: '',
    status: '',
    allPeople: 0,
    deptSuper: '',
    createTime: '',
  }
)

const DeptEmp = ref<DeptEmp[]>([])
  const getDeptEmpfn = async () => {
  const res = await getDeptEmp(parseInt(route.query.deptId as string))
  DeptEmp.value = res.data
  console.log(DeptInfo.value)
}
getDeptEmpfn()


const getDeptInfo = async () => {
  const res = await selectDeptInfo(parseInt(route.query.deptId as string))
  DeptInfo.value = res.data
  console.log(DeptInfo.value)
}
console.log(parseInt(route.query.deptId as string))
getDeptInfo()

// const deptData = [
//   {
//     staffNum: '001',
//     staffName: '张三',
//     position: '前端开发工程师',
//     sex: '男',
//     age: 28,
//   },
//   {
//     staffNum: '002',
//     staffName: '李四',
//     position: '后端开发工程师',
//     sex: '女',
//     age: 30,
//   },
//   // 更多数据...
//   {
//     staffNum: '003',
//     staffName:
//       '王五',
//     position: '产品经理',
//     sex: '男',
//     age: 32,
//   }
  
// ]
</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-form-item__label {
  position: relative;
  /* 设置相对定位作为星号的定位基准 */
  text-align: justify;
  text-align-last: justify;
  /* 确保最后一行也两端对齐 */
  padding-left: 10px;
  /* 为星号预留空间 */
}

.el-form-item__label:before {
  content: '*';
  color: red;
  position: absolute;
  left: 0;
  /* 星号定位到标签最左侧 */
  top: 0;
  /* 调整垂直位置以适应行高 */
}
.first{
  display: flex;
  justify-content: space-between;
}
</style>
